<template>
  <Row :gutter="20">
    <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
      <Card dis-hover shadow style="height: 400px;padding: 0px;">
        <p slot="title">
          <Icon type="ios-film-outline"></Icon>
          基本折线图
        </p>
        <line-chart1 :lineChart1Data="lineChart1Data"></line-chart1>
      </Card>
    </i-col>
    <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
      <Card dis-hover shadow style="height: 400px;padding: 0px;">
        <p slot="title">
          <Icon type="ios-film-outline"></Icon>
          双折线图
        </p>
        <line-chart2 :lineChart2Data="lineChart2Data"></line-chart2>
      </Card>
    </i-col>
    <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
      <Card dis-hover shadow style="height: 400px;padding: 0px;">
        <p slot="title">
          <Icon type="ios-film-outline"></Icon>
          折线统计1图
        </p>
        <line-chart3></line-chart3>
      </Card>
    </i-col>
    <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
      <Card dis-hover shadow style="height: 400px;padding: 0px;">
        <p slot="title">
          <Icon type="ios-film-outline"></Icon>
          折线统计图
        </p>
        <line-chart4 :charHeight="charHeight" charId="charId5"></line-chart4>
      </Card>
    </i-col>
    <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
      <Card dis-hover shadow style="height: 400px;padding: 0px;">
        <p slot="title">
          <Icon type="ios-film-outline"></Icon>
          折线统计图
        </p>
        <line-chart5 :charHeight="charHeight" charId="charId6"></line-chart5>
      </Card>
    </i-col>
    <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
      <Card dis-hover shadow style="height: 400px;padding: 0px;">
        <p slot="title">
          <Icon type="ios-film-outline"></Icon>
          折线统计图1
        </p>
        <line-chart6 :charHeight="charHeight" charId="charId3"></line-chart6>
      </Card>
    </i-col>
  </Row>
</template>
<script>
  import lineChart1 from './lineChart1.vue'
  import lineChart2 from './lineChart2.vue'
  import lineChart3 from './lineChart3.vue'
  import lineChart4 from './lineChart4.vue'
  import lineChart5 from './lineChart5.vue'
  import lineChart6 from './lineChart6.vue'

  export default {
    components: {
      'line-chart1': lineChart1,
      'line-chart2': lineChart2,
      'line-chart3': lineChart3,
      'line-chart4': lineChart4,
      'line-chart5': lineChart5,
      'line-chart6': lineChart6,
    },
    data() {
      return {
        lineChart1Data: {
          height: 400 - 51 - 16 - 16,
          id: "charId1",
          data: [{name: '1991', value: 3}, {name: '1992', value: 4}, {name: '1993', value: 3.5}, {
            name: '1994',
            value: 5
          }, {name: '1995', value: 4.9}, {name: '1996', value: 6}, {name: '1997', value: 7}, {
            name: '1998',
            value: 9
          }, {name: '1999', value: 13}],
        },
        lineChart2Data: {
          height: 400 - 51 - 16 - 16,
          id: "charId2",
          data: {
            xAxis: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月",],
            value: [
              {
                name: "伦敦", dataList: [
                  3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17, 16.6, 14.2, 10.3, 6.6, 4.8
                ]
              },
              {
                name: "巴黎", dataList: [
                  7, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6
                ]
              },
              {
                name: "巴黎1", dataList: [
                  7, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6
                ]
              },
            ]
          }
        },
        charHeight: 400 - 51 - 16 - 16
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态

    },
    methods: {//执行的方法

    },
    watch: {//监听

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
